<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <!-- 
      id:标识元素的唯一性
      width:画布的宽度
      height:画布的高度
    -->
   <canvas id="c1" width="600" height="600">
      当前浏览器不支持canvas，请下载最新版浏览器
      <a href="https://www.google.cn/chrome/?standalone=1&platform=win64">立即下载</a>
   </canvas>

   <script>
      // 1.找到画布
      const c1 = document.getElementById('c1')

      // 判断是否有getContext
      if (!c1.getContext) {
         console.log('当前浏览器不支持canvas，请下载最新版浏览器')
      }
      // 2.获取画笔，上下文对象
      const ctx = c1.getContext('2d')
      console.log(ctx)
      // 3.绘制图形
      // 3.1绘制矩形fillRect(位置x，位置y，宽度，高度)

      /*
       //线性渐变 
       // let linearGradient = ctx.createLinearGradient(100, 200, 400, 500)
       // linearGradient.addColorStop(0, 'red')
       // linearGradient.addColorStop(0.5, 'green')
       // linearGradient.addColorStop(1, 'blue')
       // ctx.fillStyle = linearGradient
       // ctx.fillRect(100, 200, 300, 300)
       let index = 0
 
       function render() {
          ctx.clearRect(0, 0, 600, 600)
          index += 0.01
          if (index > 1) {
             index = 0
          }
          let linearGradient = ctx.createLinearGradient(100, 200, 400, 500)
          linearGradient.addColorStop(0, 'red')
          linearGradient.addColorStop(index, '#ffcccc')
          linearGradient.addColorStop(1, 'blue')
          ctx.fillStyle = linearGradient
          ctx.fillRect(100, 200, 300, 300)
          requestAnimationFrame(render)
       }
 
       requestAnimationFrame(render)
  */

      /*
         // 径向渐变
         let radialGradient = ctx.createRadialGradient(300, 300, 0, 300, 300, 100)
         radialGradient.addColorStop(0, 'red')
         radialGradient.addColorStop(0.3, '#ffcccc')
         radialGradient.addColorStop(1, 'blue')
         ctx.fillStyle = radialGradient
         ctx.fillRect(0, 0, 600, 600)
      */

      // 径向渐变模拟3D球
      let radialGradient = ctx.createRadialGradient(250, 250, 10, 300, 300, 100)
      radialGradient.addColorStop(0, '#ffcccc')
      radialGradient.addColorStop(1, 'red')
      ctx.fillStyle = radialGradient
      ctx.arc(300, 300, 100, 0, Math.PI * 2)
      ctx.fill()
   </script>
</body>

</html>